
@media print {
    gs-envelope {
        border-collapse: collapse !important;
    }
    gs-envelope td,
    gs-envelope th {
        background-color: #fff !important;
    }
    gs-envelope th,
    gs-envelope td {
        border: 1px solid #ddd !important;
    }
}

/*
gs-envelope:focus {
    background-color: #FFF;
    outline: none;
}
*/

gs-envelope caption {
  padding-top: 8px;
  padding-bottom: 8px;
  color: #777;
  text-align: left;
}
gs-envelope th {
  text-align: left;
}
gs-envelope table {
  background-color: transparent;
  width: 100%;
  max-width: 100%;
}
gs-envelope table > thead > tr > th,
gs-envelope table > tbody > tr > th,
gs-envelope table > tfoot > tr > th,
gs-envelope table > thead > tr > td,
gs-envelope table > tbody > tr > td,
gs-envelope table > tfoot > tr > td {
  padding: 8px;
  /*line-height: 1.42857143;*/
  vertical-align: top;
  border-top: 1px solid #ddd;
}
gs-envelope table > thead > tr > th {
  vertical-align: bottom;
  border-bottom: 2px solid #ddd;
}
gs-envelope table > caption + thead > tr:first-child > th,
gs-envelope table > colgroup + thead > tr:first-child > th,
gs-envelope table > thead:first-child > tr:first-child > th,
gs-envelope table > caption + thead > tr:first-child > td,
gs-envelope table > colgroup + thead > tr:first-child > td,
gs-envelope table > thead:first-child > tr:first-child > td {
  border-top: 0;
}
gs-envelope table > tbody + tbody {
  border-top: 2px solid #ddd;
}
gs-envelope {
  background-color: #fff;
}
gs-envelope table > thead > tr > th,
gs-envelope table > tbody > tr > th,
gs-envelope table > tfoot > tr > th,
gs-envelope table > thead > tr > td,
gs-envelope table > tbody > tr > td,
gs-envelope table > tfoot > tr > td {
  padding: 5px;
}
gs-envelope {
  border: 1px solid #ddd;
}
gs-envelope table > thead > tr > th,
gs-envelope table > tbody > tr > th,
gs-envelope table > tfoot > tr > th,
gs-envelope table > thead > tr > td,
gs-envelope table > tbody > tr > td,
gs-envelope table > tfoot > tr > td,
gs-envelope .fixed-header-cell {
  border: 1px solid #ddd;
}
gs-envelope table > thead > tr > th,
gs-envelope table > thead > tr > td,
gs-envelope .fixed-header-cell {
  border-bottom-width: 2px;
}
gs-envelope table > tbody > tr:hover {
  background-color: #f5f5f5;
}
gs-envelope col[class*="col-"] {
  position: static;
  display: table-column;
  float: none;
}
gs-envelope td[class*="col-"],
gs-envelope th[class*="col-"] {
  position: static;
  display: table-cell;
  float: none;
}
gs-envelope table > thead > tr > td.active,
gs-envelope table > tbody > tr > td.active,
gs-envelope table > tfoot > tr > td.active,
gs-envelope table > thead > tr > th.active,
gs-envelope table > tbody > tr > th.active,
gs-envelope table > tfoot > tr > th.active,
gs-envelope table > thead > tr.active > td,
gs-envelope table > tbody > tr.active > td,
gs-envelope table > tfoot > tr.active > td,
gs-envelope table > thead > tr.active > th,
gs-envelope table > tbody > tr.active > th,
gs-envelope table > tfoot > tr.active > th {
  background-color: #f5f5f5;
}
gs-envelope table > tbody > tr > td.active:hover,
gs-envelope table > tbody > tr > th.active:hover,
gs-envelope table > tbody > tr.active:hover > td,
gs-envelope table > tbody > tr:hover > .active,
gs-envelope table > tbody > tr.active:hover > th {
  background-color: #e8e8e8;
}
gs-envelope table > thead > tr > td[bg-success],
gs-envelope table > tbody > tr > td[bg-success],
gs-envelope table > tfoot > tr > td[bg-success],
gs-envelope table > thead > tr > th[bg-success],
gs-envelope table > tbody > tr > th[bg-success],
gs-envelope table > tfoot > tr > th[bg-success],
gs-envelope table > thead > tr[bg-success] > td,
gs-envelope table > tbody > tr[bg-success] > td,
gs-envelope table > tfoot > tr[bg-success] > td,
gs-envelope table > thead > tr[bg-success] > th,
gs-envelope table > tbody > tr[bg-success] > th,
gs-envelope table > tfoot > tr[bg-success] > th {
  background-color: #dff0d8;
}
gs-envelope table > tbody > tr > td[bg-success]:hover,
gs-envelope table > tbody > tr > th[bg-success]:hover,
gs-envelope table > tbody > tr[bg-success]:hover > td,
gs-envelope table > tbody > tr:hover > [bg-success],
gs-envelope table > tbody > tr[bg-success]:hover > th {
  background-color: #d0e9c6;
}
gs-envelope table > thead > tr > td[bg-info],
gs-envelope table > tbody > tr > td[bg-info],
gs-envelope table > tfoot > tr > td[bg-info],
gs-envelope table > thead > tr > th[bg-info],
gs-envelope table > tbody > tr > th[bg-info],
gs-envelope table > tfoot > tr > th[bg-info],
gs-envelope table > thead > tr[bg-info] > td,
gs-envelope table > tbody > tr[bg-info] > td,
gs-envelope table > tfoot > tr[bg-info] > td,
gs-envelope table > thead > tr[bg-info] > th,
gs-envelope table > tbody > tr[bg-info] > th,
gs-envelope table > tfoot > tr[bg-info] > th {
  background-color: #d9edf7;
}
gs-envelope table > tbody > tr > td[bg-info]:hover,
gs-envelope table > tbody > tr > th[bg-info]:hover,
gs-envelope table > tbody > tr[bg-info]:hover > td,
gs-envelope table > tbody > tr:hover > [bg-info],
gs-envelope table > tbody > tr[bg-info]:hover > th {
  background-color: #c4e3f3;
}
gs-envelope table > thead > tr > td[bg-warning],
gs-envelope table > tbody > tr > td[bg-warning],
gs-envelope table > tfoot > tr > td[bg-warning],
gs-envelope table > thead > tr > th[bg-warning],
gs-envelope table > tbody > tr > th[bg-warning],
gs-envelope table > tfoot > tr > th[bg-warning],
gs-envelope table > thead > tr[bg-warning] > td,
gs-envelope table > tbody > tr[bg-warning] > td,
gs-envelope table > tfoot > tr[bg-warning] > td,
gs-envelope table > thead > tr[bg-warning] > th,
gs-envelope table > tbody > tr[bg-warning] > th,
gs-envelope table > tfoot > tr[bg-warning] > th {
  background-color: #fcf8e3;
}
gs-envelope table > tbody > tr > td[bg-warning]:hover,
gs-envelope table > tbody > tr > th[bg-warning]:hover,
gs-envelope table > tbody > tr[bg-warning]:hover > td,
gs-envelope table > tbody > tr:hover > [bg-warning],
gs-envelope table > tbody > tr[bg-warning]:hover > th {
  background-color: #faf2cc;
}
gs-envelope table > thead > tr > td[bg-danger],
gs-envelope table > tbody > tr > td[bg-danger],
gs-envelope table > tfoot > tr > td[bg-danger],
gs-envelope table > thead > tr > th[bg-danger],
gs-envelope table > tbody > tr > th[bg-danger],
gs-envelope table > tfoot > tr > th[bg-danger],
gs-envelope table > thead > tr[bg-danger] > td,
gs-envelope table > tbody > tr[bg-danger] > td,
gs-envelope table > tfoot > tr[bg-danger] > td,
gs-envelope table > thead > tr[bg-danger] > th,
gs-envelope table > tbody > tr[bg-danger] > th,
gs-envelope table > tfoot > tr[bg-danger] > th {
  background-color: #f2dede;
}
gs-envelope table > tbody > tr > td[bg-danger]:hover,
gs-envelope table > tbody > tr > th[bg-danger]:hover,
gs-envelope table > tbody > tr[bg-danger]:hover > td,
gs-envelope table > tbody > tr:hover > [bg-danger],
gs-envelope table > tbody > tr[bg-danger]:hover > th {
  background-color: #ebcccc;
}

/* ################################################################# */
/* ######################## ELEMENT STYLES ######################### */
/* ################################################################# */

gs-envelope {
    position: relative;
    display: block;
    
    width: 100%;
    height: 100%;
    
    overflow: hidden;
    /*
    outline: 1px solid #168216;
    outline-offset: -1px;
    */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

/* the code in this rule started life in the next rule (gs-envelope > .root),
    it solved an issue in a8g but in firefox only it caused an issue in wtkv2,
    the difference being that the original case was caused of the gs-envelope element having the flex attribute,
    but when tested in chrome: this issue fixed the case and lived harmoniously with the other applications,
    so now this fix is only applied in the case of the gs-envelope having the flex attribute so that firefox works */
gs-envelope[flex] > .root {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    /* flex: 1; <== caused another firefox issue */
}

gs-envelope > .root {
    height: 100%;
    
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
}


.blue gs-envelope,
gs-envelope.blue {
    border-color: #3B99BE;
}

gs-envelope:not([expand-to-content]) {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
}

/* ################################################################## */
/* ####################### EXPAND TO CONTENT ######################## */
/* ################################################################## */

gs-envelope[expand-to-content] {
    display: block;
    height: auto;
    width: auto;
}


/* ################################################################# */
/* ########################## ROW NUMBER ########################### */
/* ################################################################# */

gs-envelope gs-static[column="row_number"] {
    /*position: relative;*/
    font-size: 0.5em;
    color: #AAAAAA;
    text-align: right;
    height: 0.8em;
    min-width: 1.5em;
    padding-top: 1.2em;
}

gs-envelope th[selected]:first-child gs-static[column="row_number"],
gs-envelope th[selected-secondary]:first-child gs-static[column="row_number"] {
    /*text-indent: -9999px;
    font-size: 1em;
    padding: 0;*/
    
    color: transparent;
    
    /*color: #168216;*/
}

gs-envelope th[selected]:first-child,
gs-envelope th[selected-secondary]:first-child {
    position: relative;
}

/*gs-envelope th[selected]:first-child gs-static[column="row_number"]:after,
gs-envelope th[selected-secondary]:first-child gs-static[column="row_number"]:after*/
gs-envelope th[selected]:first-child:after,
gs-envelope th[selected-secondary]:first-child:after {
    position: absolute;
    display: block;
    left: 0;
    /*top: 0;*/
    top: 50%;
    margin-top: -0.5em;
    /*height: 100%;*/
    width: 100%;
    
    line-height: 1; /*100%;*/
    content: '\f0da';
    
    /*color: #000000;*/
    /*
    color: #168216;
    */
    font-family: fontawesome;
}

/*
.blue gs-envelope th[selected]:first-child:after,
.blue gs-envelope th[selected-secondary]:first-child:after,
gs-envelope.blue th[selected]:first-child:after,
gs-envelope.blue th[selected-secondary]:first-child:after {
    color: #3B99BE;
}
*/

/*
gs-envelope th:first-child,
gs-envelope th:first-child {
    position: relative;
}

gs-envelope th[selected]:first-child gs-static[column="row_number"],
gs-envelope th[selected-secondary]:first-child gs-static[column="row_number"] {
    position: absolute;
    
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}
gs-envelope th[selected]:first-child gs-static[column="row_number"]:before,
gs-envelope th[selected-secondary]:first-child gs-static[column="row_number"]:before {
    position: absolute;
    left: 0;
    top: 0;
    
    content: '\f040';
    
    font-size: 1.8em;
    color: #000000;
    font-family: fontawesome;
}

gs-envelope th[selected]:first-child gs-static[column="row_number"]:before,
gs-envelope th[selected-secondary]:first-child gs-static[column="row_number"]:before {
    position: absolute;
    right: 0;
    top: -0.1em;
    
    content: '\f0da';
    
    font-size: 1.8em;
    color: #000000;
    font-family: fontawesome;
}*/


/* ################################################################# */
/* ####################### SCROLL CONTAINER ######################## */
/* ################################################################# */

gs-envelope .scroll-container {
    position: relative;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    /*
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;*/
}


/* ################################################################# */
/* ####################### LOADER CONTAINER ######################## */
/* ################################################################# */

gs-envelope .loader-container {
    position: absolute;
    left: 0px;
    width: 100%;
    height: 100%;
}


/* ################################################################# */
/* ######################### FIXED HEADER ########################## */
/* ################################################################# */

gs-envelope .fixed-header-container {
    position: relative;
}

gs-envelope .fixed-header-cell {
    position: absolute;
    
    padding-top: 0.14em; /*padding: 0.14em;*//*0.15em;*/
    text-align: center;
    font-weight: 900;
    
    box-shadow: 0.02em 0.1em 0.2em 0 #CCCCCC; /*box-shadow: -0.02em 0.1em 0.2em 0 #CCCCCC;*/
    background-color: #FFFFFF;
    /*
    border-left: 1px solid #168216;
    border-bottom: 2px solid #168216;
    */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    
    z-index: 2; /* make it so that these remain on top when elements are being scrolled behind them */
}

.blue gs-envelope .fixed-header-cell,
gs-envelope.blue .fixed-header-cell {
    border-color: #3B99BE;
}

gs-envelope .fixed-header-cell:first-child { /*last-child*/
    border-left: 0;
}
/*
gs-envelope .fixed-header-cell:first-child {
    border-right: 1px solid #168216;
}*/

/* ################################################################# */
/* ########################## COPY INPUT ########################### */
/* ################################################################# */

gs-envelope .gs-envelope-copy-focus-target {
    /*
    position: absolute;
    top: -100%;
    left: -100%;
    */
    width: 0;
    height: 0;
    border: 0 none;
    margin: 0;
    padding: 0;
    
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: -5000;
    opacity: 0.00000001;
    
    -webkit-appearance: none;
    -moz-appearance: none;
}


/* ################################################################ */
/* ############################# HUD ############################## */
/* ################################################################ */

gs-envelope .hud-container-top,
gs-envelope .hud-container-bottom {
    background-color: #FFFFFF;
    min-height: 2.2em;
}

gs-envelope .hud-container-top {
    /*
    border-bottom: 1px solid #168216;
    */
}

gs-envelope .hud-container-bottom {
    /*
    border-top: 1px solid #168216;
    */
}

.blue gs-envelope .hud-container-bottom,
gs-envelope.blue .hud-container-bottom {
    /*
    border-color: #3B99BE;
    */
}

/* ################################################################## */
/* ############################# TABLE ############################## */
/* ################################################################## */

gs-envelope table {
    /*
    background-color: #F5F5F5;
    border-right: 1px solid #168216;
    */
}

.blue gs-envelope table,
gs-envelope.blue table {
    border-color: #3B99BE;
}

gs-envelope table tr > [selected] * {
    background-color: transparent;
}

/* ################################################################### */
/* ########################## TABLE REFLOW ########################### */
/* ################################################################### */

gs-envelope.reflow table,
gs-envelope.reflow table tbody,
gs-envelope.reflow table tbody tr {
    display: block;
}

gs-envelope.reflow table tbody th,
gs-envelope.reflow table tbody td {
    width: 100% !important;
    float: left;
    clear: left;
    
    min-width: 0 !important;
    /*
    border: 1px solid #168216;
    */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}

.blue gs-envelope.reflow table tbody td,
.blue gs-envelope.reflow table tbody th,
gs-envelope.reflow.blue table tbody td,
gs-envelope.reflow.blue table tbody th {
    /*
    border-color: #3B99BE;
    */
}

gs-envelope.reflow .fixed-header-container,
gs-envelope.reflow table thead {
    display: none;
}

gs-envelope.reflow table tbody th,
gs-envelope.reflow table tbody td {
    height: auto;
    /*
    padding: 0.3em;
    */
}

gs-envelope.reflow table tbody tr:not(:first-child) th:first-child,
gs-envelope.reflow table tbody tr:not(:first-child) td:first-child {
    border-top: 3px solid #000000;
    /*margin-top: 0.5em;*/
}

gs-envelope.reflow table tbody tr:not(:last-child) th:last-child,
gs-envelope.reflow table tbody tr:not(:last-child) td:last-child {
    border-bottom: 3px solid #000000;
    /*margin-bottom: 0.5em;*/
}

gs-envelope.reflow table th:not(:first-child):before,
gs-envelope.reflow table td:before {
    display: block;
    
    margin: 0.3em;
    
    text-align: center;
    font-weight: 900;
    
    content: attr(heading); /* ':';*/
    
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}

gs-envelope.reflow table tbody tr {
    /*background-color: #168216;*/
}

gs-envelope.reflow table tbody tr th,
gs-envelope.reflow table tbody tr td {
    /*background-color: #E9F1E9;*/
}


/* ################################################################## */
/* ######################## ORDER BY DIALOG ######################### */
/* ################################################################## */

#order-by-dialog-used-columns,
#order-by-dialog-unused-columns {
    height: 100%;
    overflow: auto;

    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

#order-by-dialog-ghost-container {
    position: relative;
    height: 0;
    overflow: visible;
}

#order-by-dialog-ghost-container .order_by_column {
    position: absolute;
    width: 100%;
    background-color: #F5F5F5;
    opacity: 0.6;
    
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    z-index: 11;
}


#order-by-dialog-used-columns .drop_marker {
    /* outline: 3px solid #006E00; */
    outline: 3px solid #6E6E6E;
}

#order-by-dialog-used-columns .order_by_column,
#order-by-dialog-unused-columns .order_by_column,
#order-by-dialog-ghost-container .order_by_column {
    /*padding: 0.2em;*/
    margin: 0.1em; /* 0.2em */
    /* border: 2px solid #168216; */
    border: 2px solid #828282;
    font-size: 1.1em;
}

.blue #order-by-dialog-ghost-container .order_by_column {
    /* border-color: #3B99BE; */
    border-color: #999999;
}

#order-by-dialog-used-columns .order_by_column .sort:after,
#order-by-dialog-ghost-container .order_by_column .sort:after {
    background-color: transparent;
    color: #000000;
}

#order-by-dialog-used-columns .order_by_column .delete:after,
#order-by-dialog-ghost-container .order_by_column .delete:after {
    background-color: transparent;
    color: #000000;
}

#order-by-dialog-used-columns .order_by_column .column_name,
#order-by-dialog-ghost-container .order_by_column .column_name {
    padding: 0.2em;
}

#order-by-dialog-used-columns .order_by_column .direction:after,
#order-by-dialog-ghost-container .order_by_column .direction:after {
    background-color: transparent;
    color: #000000;
}